<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <!-- <el-form inline ref="searchForm">
          <el-form-item label="活动类型" prop="news_type">
            <el-select v-model="builingForm.party_volunteer_activity_type_id" placeholder="请选择活动类型">
              <el-option
                v-for="(oVal, oIdx) of type"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-form-item>
        </el-form> -->
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" border>
        <el-table-column prop="title" label="活动名称" />
        <el-table-column prop="sign_up_count" label="报名人数" />
        <el-table-column prop="comment_count" label="评论人数" />
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column prop="qr_img" label="签到二维码">
          <template slot-scope="{ row }">
            <el-image v-if="!row.finished"
              style="width: 150px; height: auto"
              :src="row.qr_img"
              :preview-src-list="[row.qr_img]"
            />
            <div v-else>活动结束，二维码已失效</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="EditCommunity(row.id)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="delCommunityById(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.per_page"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      :title="(builingForm.$id ? '编辑' : '新增') + '志愿活动'"
      :visible.sync="showAddOrEdit"
      width="1000px"
      @closed="resetForm()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item label="活动标题" prop="title">
          <el-input
            v-model="builingForm.title"
            placeholder="请输入活动标题"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="主办方名称" prop="organizer">
          <el-input
            v-model="builingForm.organizer"
            placeholder="请输入主办方名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="活动地址" prop="organizer_addr">
          <el-input
            v-model="builingForm.organizer_addr"
            placeholder="请输入活动地址"
          ></el-input>
        </el-form-item>
         <el-form-item class="span-2" label="报名上限" prop="sign_up_max">
          <el-input
            v-model.number="builingForm.sign_up_max"
            placeholder="请输入允许报名人数"
          ></el-input>
        </el-form-item>
        <el-form-item class="span-2" label="活动类型" prop="news_type">
            <el-select v-model="builingForm.party_volunteer_activity_type_id" placeholder="请选择活动类型">
              <el-option
                v-for="(oVal, oIdx) of type"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
        <el-form-item class="span-2" label="是否置顶" prop="is_top">
          <el-switch v-model="builingForm.is_top"></el-switch>
        </el-form-item>
        <el-form-item class="span-2" label="是否开启评论" prop="is_comment">
          <el-switch v-model="builingForm.is_comment"></el-switch>
        </el-form-item>
        <el-form-item  label="是否审核评论" prop="comment_check">
          <el-switch v-model="builingForm.comment_check"></el-switch>
        </el-form-item>
        <el-form-item class="span-2" label="是否开启报名" prop="is_sign_up">
          <el-switch v-model="builingForm.is_sign_up"></el-switch>
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up" class="span-2" label="报名积分" prop="sign_in_score">
          <el-input
            v-model="builingForm.sign_up_score"
            placeholder="请输入报名积分"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up" class="span-2" label="报名开始时间" prop="sign_up_start_time">
          <el-date-picker
            v-model="builingForm.sign_up_start_time"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_up" class="span-2" label="报名结束时间" prop="sign_up_end_time">
          <el-date-picker
            v-model="builingForm.sign_up_end_time"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item class="span-2"  label="是否开启签到" prop="is_sign_in">
          <el-switch v-model="builingForm.is_sign_in"></el-switch>
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_in" class="span-2" label="签到积分" prop="sign_in_score">
          <el-input
            v-model="builingForm.sign_in_score"
            placeholder="请输入活动地址"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2"  label="是否开启签退" prop="is_sign_in">
          <el-switch v-model="builingForm.is_sign_in"></el-switch>
        </el-form-item>
        <el-form-item v-if="builingForm.is_sign_in" class="span-2" label="签退积分" prop="sign_in_score">
          <el-input
            v-model="builingForm.sign_out_score"
            placeholder="请输入签退积分"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="活动开始时间" prop="start_time">
          <el-date-picker
            v-model="builingForm.start_time"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="span-2" label="活动结束时间" prop="end_time">
          <el-date-picker
            v-model="builingForm.end_time"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="图片" prop="thumbnail">
          <Upload
            v-model="builingForm.banner"
            :file.sync="builingForm.banner"
          />
        </el-form-item>

        <tinymce v-model="builingForm.content" height="300" />
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="addCommunity()"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import dayjs from "@/utils/dayjs"
import { table, addOrEdit } from "@/utils/mixins";
import Tinymce from "@/components/Tinymce";
import Upload from "@/components/Upload/SingleImage.vue";
import QRcode from '@/components/QRcode.vue';

export default {
  mixins: [table, addOrEdit],
  components: {
    Tinymce,
    Upload,
    QRcode
  },
  data: () => ({
    showAddOrEdit:false,
    isLoading: true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },
    builingForm: {
      title:"",
      organizer:"",
      organizer_addr:"",
      sign_up_max:100,//最大报名人数
      is_top:false,//是否置顶
      is_comment:true,//是否开启评论
      comment_check:false,//是否需要审核评论
      is_sign_in:true,//是否开启签到
      is_sign_up:true,//是否开启活动报名
      sign_up_start_time:"",//报名开始时间
      sign_up_end_time:"",//报名结束时间
      start_time:'',//活动时间
      end_time:"",//结束时间
      banner:"",//缩略图
      sign_up_score:0,//报名积分
      sign_in_score:0,//签到积分
      sign_out_score:0,//签退积分
      party_volunteer_activity_type_id:'',
      content:'',
    },
    type:[]
  }),

  created() {
    API.getCommunityVoluntGroupList()
      .then(({data}) => {
        let type=data.map(item=>{
          return {label:item.name,value:item.id}
        })
        this.type=type
        this.builingForm.party_volunteer_activity_type_id=type[0].value
        this.getList()
      }).catch((err) => {
      }).finally(() =>{
      })
  },

  methods:{
    // 获取列表
    getList(){
      this.isLoading=true
      let id=this.builingForm.activity_type_id
      API.getCommunityVoluntActivityList(id,this.searchForm)
        .then(({data}) => {
          let consultList = data.items.map(item=>{
            return {
              id:item.id,
              title:item.title,
              qr_img:item.qr_img,
              finished:dayjs().subtract(1, 'hour').isAfter(item.end_time),
              sign_up_count:item.party_volunteer_activity_sign_up.length,
              comment_count:item.party_volunteer_activity_comments.length,
              create_time:item.create_time
            }
          })
          this.tableData=consultList
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 编辑活动
    EditCommunity(id){
      this.builingForm.$id=id
      API.getCommunityVoluntActivityDetail(id)
      .then(({data}) => {
        this.builingForm.title=data.title
        this.builingForm.organizer=data.organizer
        this.builingForm.organizer_addr=data.organizer_addr
        this.builingForm.sign_up_max=data.sign_up_max//最大报名人数
        this.builingForm.is_top=data.is_top//是否置顶
        this.builingForm.is_comment=data.is_comment//是否开启评论
        this.builingForm.comment_check=data.comment_check//是否需要审核评论
        this.builingForm.is_sign_up=data.is_sign_up//是否开启活动报名
        this.builingForm.sign_up_start_time=data.sign_up_start_time,//报名开始时间
        this.builingForm.sign_up_end_time=data.sign_up_end_time//报名结束时间
        this.builingForm.is_sign_in=data.is_sign_in//是否开启签到
        this.builingForm.sign_up_score=data.sign_up_score//报名积分
        this.builingForm.start_time=data.start_time//活动时间
        this.builingForm.end_time=data.end_time//结束时间
        this.builingForm.banner=data.banner//缩略图
        this.builingForm.sign_in_score=data.sign_in_score//签到积分
        this.builingForm.sign_out_score=data.sign_out_score//签退积分
        this.builingForm.party_volunteer_activity_type_id=data.activity_type_id
        this.builingForm.content=data.content
      }).catch((err) => {
      }).finally(() =>{
        this.showAddOrEdit=true
      })
    },

    // 删除活动
    delCommunityById(id){
      let _that=this
      this.$confirm(`是否删除改条数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delCommunityVoluntActivity(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 创建活动
    addCommunity(){
      if(!this.builingForm.title.trim()) return this.$message.error("标题不可为空~~");
      if(!this.builingForm.organizer.trim()) return this.$message.error("主办方不可为空~~")
      if(!this.builingForm.organizer_addr.trim()) return this.$message.error("举办地不可为空~~")
      if(!this.builingForm.sign_up_start_time.trim()) return this.$message.error("报名开始时间不可为空~~")
      if(!this.builingForm.sign_up_end_time.trim()) return this.$message.error("报名结束时间不可为空~~")
      if(!this.builingForm.start_time.trim()) return this.$message.error("活动开始时间不可为空~~")
      if(!this.builingForm.end_time.trim()) return this.$message.error("活动结束不可为空~~")
      if(!this.builingForm.banner.trim()) return this.$message.error("活动图片不可为空~~")
      if(!this.builingForm.content.trim()) return this.$message.error("活动详情不可为空~~")

      let data={
        title:this.builingForm.title,
        organizer:this.builingForm.organizer,
        organizer_addr:this.builingForm.organizer_addr,
        sign_up_max:this.builingForm.sign_up_max,
        is_top:this.builingForm.is_top,
        is_comment:this.builingForm.is_comment,
        comment_check:this.builingForm.comment_check,
        is_sign_up:this.builingForm.is_sign_up,
        sign_up_start_time:this.builingForm.sign_up_start_time,
        sign_up_end_time:this.builingForm.sign_up_end_time,
        is_sign_in:this.builingForm.is_sign_in,
        sign_up_score:this.builingForm.sign_up_score,
        start_time:this.builingForm.start_time,
        end_time:this.builingForm.end_time,
        banner:this.builingForm.banner,
        sign_in_score:this.builingForm.sign_in_score,
        sign_out_score:this.builingForm.sign_out_score,
        party_volunteer_activity_type_id:this.builingForm.party_volunteer_activity_type_id,
        content:this.builingForm.content
      }
      if(this.builingForm.$id){
        let id=this.builingForm.$id
        API.editCommunityVoluntActivity(id,data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }else{
         API.addCommunityVoluntActivity(data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }
    },

    resetForm(){
      this.builingForm.$id=""
      this.builingForm.title=""
      this.builingForm.organizer=""
      this.builingForm.organizer_addr=""
      this.builingForm.sign_up_max=30//最大报名人数
      this.builingForm.is_top=false//是否置顶
      this.builingForm.is_comment=true//是否开启评论
      this.builingForm.comment_check=false//是否需要审核评论
      this.builingForm.is_sign_up=true//是否开启活动报名
      this.builingForm.sign_up_start_time="",//报名开始时间
      this.builingForm.sign_up_end_time=""//报名结束时间
      this.builingForm.is_sign_in=true//是否开启签到
      this.builingForm.sign_up_score=0//报名积分
      this.builingForm.start_time=""//活动时间
      this.builingForm.end_time=""//结束时间
      this.builingForm.banner=""//缩略图
      this.builingForm.sign_in_score=0//签到积分
      this.builingForm.sign_out_score=0//签退积分
      this.builingForm.activity_type_id=1
      this.builingForm.content=""
      this.showAddOrEdit=false
    },

  }
};
</script>

<style lang="scss" scoped>
   ::v-deep{
    .el-message-box{
      min-width:400px;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-input .el-input__inner{
      border-radius:4px !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
    .el-message-box__message{
      position: absolute !important;
      top:50% !important;
      left:40px !important;
    }
    .el-form-item__label{
      font-size:16px !important;
    }
  }
</style>
